<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bilibili 全站排行榜</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#FB7299',
            secondary: '#23ADE5',
            dark: '#18191C',
            light: '#F4F4F4',
            gray: {
              100: '#F9F9F9',
              200: '#E5E9EF',
              300: '#C0C6CF',
              400: '#99A2AA',
              500: '#6D757A',
              600: '#494949',
              700: '#232323',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-100 text-gray-700 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="sticky top-0 z-50 bg-white shadow-md">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- 返回首页按钮 -->
      <div class="flex items-center">
        <a href="work-html.html" class="text-gray-600 hover:text-primary mr-3 transition-custom">
          <i class="fa fa-home text-xl"></i>
        </a>
        
        <!-- Logo -->
        <a href="#" class="flex items-center space-x-2">
          <img src="https://picsum.photos/40/40" alt="Bilibili Logo" class="h-10 w-10 rounded-full">
          <span class="text-xl font-bold text-primary">Bilibili</span>
        </a>
      </div>
      
      <!-- 主导航 - 仅保留排行榜 -->
      <nav class="hidden md:flex items-center">
        <a href="#" class="nav-link text-primary font-medium border-b-2 border-primary pb-1">排行榜</a>
      </nav>
      
      <!-- 用户区域 -->
      <div class="flex items-center space-x-4">
        <button class="text-gray-600 hover:text-primary transition-custom">
          <i class="fa fa-search text-xl"></i>
        </button>
        <button class="text-gray-600 hover:text-primary transition-custom">
          <i class="fa fa-bell text-xl"></i>
        </button>
        <img src="https://picsum.photos/32/32" alt="User Avatar" class="h-8 w-8 rounded-full cursor-pointer">
      </div>
    </div>
  </header>

  <!-- 主内容区 - 仅保留排行榜页面 -->
  <main class="flex-grow container mx-auto px-4 py-6">
    <!-- 排行榜页面 -->
    <div id="rank-page">
      <!-- 排行榜导航 -->
      <div class="bg-white rounded-lg shadow-md p-4 mb-6">
        <div class="flex flex-wrap items-center justify-between mb-4">
          <h2 class="text-xl font-bold">全站排行榜</h2>
          <div class="flex space-x-2 mt-2 sm:mt-0">
            <button class="px-3 py-1 bg-primary text-white rounded-full text-sm">日榜</button>
            <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm transition-custom">周榜</button>
            <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm transition-custom">月榜</button>
          </div>
        </div>
        
        <div class="flex flex-wrap gap-2">
          <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm transition-custom">全部</button>
          <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm transition-custom">动画</button>
          <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm transition-custom">音乐</button>
          <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm transition-custom">游戏</button>
          <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm transition-custom">知识</button>
          <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm transition-custom">科技</button>
          <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm transition-custom">运动</button>
          <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm transition-custom">汽车</button>
        </div>
      </div>
      
      <!-- 排行榜内容 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 热门榜 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
          <div class="bg-primary text-white p-4">
            <h3 class="font-bold text-lg">热门榜</h3>
          </div>
          <ul class="divide-y">
            <!-- 排行项 1 -->
            <li class="p-4 flex items-center">
              <span class="text-primary font-bold text-xl mr-3">1</span>
              <img src="https://picsum.photos/80/45?random=10" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">两个人不知天地为何物了</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>368万</span>
                  <span class="mx-1">•</span>
                  <span>6557</span>
                </div>
              </div>
            </li>
            
            <!-- 排行项 2 -->
            <li class="p-4 flex items-center">
              <span class="text-secondary font-bold text-xl mr-3">2</span>
              <img src="https://picsum.photos/80/45?random=11" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">“CPOPwave”系列活动推介《崩坏：星穹铁道》——国产游戏出海的新标杆！</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>219万</span>
                  <span class="mx-1">•</span>
                  <span>8.9万</span>
                </div>
              </div>
            </li>
            
            <!-- 排行项 3 -->
            <li class="p-4 flex items-center">
              <span class="text-amber-500 font-bold text-xl mr-3">3</span>
              <img src="https://picsum.photos/80/45?random=12" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">当程序员遇到产品经理的奇葩需求</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>186万</span>
                  <span class="mx-1">•</span>
                  <span>7.2万</span>
                </div>
              </div>
            </li>
            
            <!-- 排行项 4-10 -->
            <li class="p-4 flex items-center">
              <span class="text-gray-500 font-bold text-xl mr-3">4</span>
              <img src="https://picsum.photos/80/45?random=13" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">【极限挑战】24小时生存挑战，只有10元预算</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>156万</span>
                  <span class="mx-1">•</span>
                  <span>5.8万</span>
                </div>
              </div>
            </li>
            
            <li class="p-4 flex items-center">
              <span class="text-gray-500 font-bold text-xl mr-3">5</span>
              <img src="https://picsum.photos/80/45?random=14" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">史上最下饭的吃播，看一遍饿三遍</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>132万</span>
                  <span class="mx-1">•</span>
                  <span>4.5万</span>
                </div>
              </div>
            </li>
          </ul>
          <div class="p-3 text-center border-t">
            <a href="#" class="text-primary hover:underline text-sm">查看完整榜单</a>
          </div>
        </div>
        
        <!-- 新人榜 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
          <div class="bg-green-500 text-white p-4">
            <h3 class="font-bold text-lg">新人榜</h3>
          </div>
          <ul class="divide-y">
            <!-- 排行项 1-5 -->
            <li class="p-4 flex items-center">
              <span class="text-primary font-bold text-xl mr-3">1</span>
              <img src="https://picsum.photos/80/45?random=15" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">【新手向】从零开始学绘画，一个月后竟成这样</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>98万</span>
                  <span class="mx-1">•</span>
                  <span>3.2万</span>
                </div>
              </div>
            </li>
            
            <li class="p-4 flex items-center">
              <span class="text-secondary font-bold text-xl mr-3">2</span>
              <img src="https://picsum.photos/80/45?random=16" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">零基础学唱歌，三个月后居然能上台表演了</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>87万</span>
                  <span class="mx-1">•</span>
                  <span>2.8万</span>
                </div>
              </div>
            </li>
            
            <li class="p-4 flex items-center">
              <span class="text-amber-500 font-bold text-xl mr-3">3</span>
              <img src="https://picsum.photos/80/45?random=17" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">在家自制网红美食，成本不到10元</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>76万</span>
                  <span class="mx-1">•</span>
                  <span>2.5万</span>
                </div>
              </div>
            </li>
            
            <li class="p-4 flex items-center">
              <span class="text-gray-500 font-bold text-xl mr-3">4</span>
              <img src="https://picsum.photos/80/45?random=18" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">5分钟学会手机摄影，拍出电影感大片</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>65万</span>
                  <span class="mx-1">•</span>
                  <span>2.1万</span>
                </div>
              </div>
            </li>
            
            <li class="p-4 flex items-center">
              <span class="text-gray-500 font-bold text-xl mr-3">5</span>
              <img src="https://picsum.photos/80/45?random=19" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">【职场新人】如何快速适应新环境并脱颖而出</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>58万</span>
                  <span class="mx-1">•</span>
                  <span>1.9万</span>
                </div>
              </div>
            </li>
          </ul>
          <div class="p-3 text-center border-t">
            <a href="#" class="text-green-500 hover:underline text-sm">查看完整榜单</a>
          </div>
        </div>
        
        <!-- 原创榜 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
          <div class="bg-purple-500 text-white p-4">
            <h3 class="font-bold text-lg">原创榜</h3>
          </div>
          <ul class="divide-y">
            <!-- 排行项 1-5 -->
            <li class="p-4 flex items-center">
              <span class="text-primary font-bold text-xl mr-3">1</span>
              <img src="https://picsum.photos/80/45?random=20" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">原创音乐《星空下的约定》，全网首发</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>124万</span>
                  <span class="mx-1">•</span>
                  <span>4.5万</span>
                </div>
              </div>
            </li>
            
            <li class="p-4 flex items-center">
              <span class="text-secondary font-bold text-xl mr-3">2</span>
              <img src="https://picsum.photos/80/45?random=21" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">【原创动画】五分钟看完一部科幻大片</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>112万</span>
                  <span class="mx-1">•</span>
                  <span>4.1万</span>
                </div>
              </div>
            </li>
            
            <li class="p-4 flex items-center">
              <span class="text-amber-500 font-bold text-xl mr-3">3</span>
              <img src="https://picsum.photos/80/45?random=22" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">自制微电影《归途》，感动无数人</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>98万</span>
                  <span class="mx-1">•</span>
                  <span>3.8万</span>
                </div>
              </div>
            </li>
            
            <li class="p-4 flex items-center">
              <span class="text-gray-500 font-bold text-xl mr-3">4</span>
              <img src="https://picsum.photos/80/45?random=23" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">【原创游戏】开发一个简单的像素冒险游戏</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>87万</span>
                  <span class="mx-1">•</span>
                  <span>3.5万</span>
                </div>
              </div>
            </li>
            
            <li class="p-4 flex items-center">
              <span class="text-gray-500 font-bold text-xl mr-3">5</span>
              <img src="https://picsum.photos/80/45?random=24" alt="视频缩略图" class="w-20 h-12 object-cover mr-3">
              <div class="flex-1">
                <h4 class="font-medium line-clamp-1">原创舞蹈《律动青春》，展现青春活力</h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>76万</span>
                  <span class="mx-1">•</span>
                  <span>3.2万</span>
                </div>
              </div>
            </li>
          </ul>
          <div class="p-3 text-center border-t">
            <a href="#" class="text-purple-500 hover:underline text-sm">查看完整榜单</a>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-gray-800 text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-lg font-bold mb-4">关于我们</h3>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-primary transition-custom">公司介绍</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">联系方式</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">加入我们</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-bold mb-4">帮助中心</h3>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-primary transition-custom">常见问题</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">用户反馈</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">安全中心</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-bold mb-4">平台协议</h3>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-primary transition-custom">用户协议</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">隐私政策</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">版权保护</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-bold mb-4">关注我们</h3>
          <div class="flex space-x-4">
            <a href="#" class="text-white hover:text-primary transition-custom">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-primary transition-custom">
              <i class="fa fa-wechat text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-primary transition-custom">
              <i class="fa fa-twitter text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-primary transition-custom">
              <i class="fa fa-instagram text-xl"></i>
            </a>
          </div>
          <p class="mt-4 text-sm text-gray-400">
            扫描二维码，下载 Bilibili 客户端
          </p>
          <div class="mt-2 bg-white p-2 inline-block rounded">
            <img src="https://picsum.photos/80/80" alt="二维码" class="w-20 h-20">
          </div>
        </div>
      </div>
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm text-gray-400">
        <p>© 2025 Bilibili. All rights reserved.</p>
      </div>
    </div>
  </footer>
</body>
</html>